import SegmentedControl from "@react-native-segmented-control/segmented-control";
import React, { useEffect, useState } from "react";
import { Text, View, StyleSheet } from "react-native";
import { Entypo } from "@expo/vector-icons";
import AsyncStorage from "@react-native-async-storage/async-storage";

export default function Count() {
  const [selectedIndex, setSelectedIndex] = useState(0);

  const [startGameEasy, setStartGameEasy] = useState(0);
  const [startGameMid, setStartGameMid] = useState(0);
  const [startGameHard, setStartGameHard] = useState(0);

  const [winGameEasy, setWinGameEasy] = useState(0);
  const [winGameMid, setWinGameMid] = useState(0);
  const [winGameHard, setWinGameHard] = useState(0);

  const [shortestTimeEasy, setShortestTimeEasy] = useState(0);
  const [shortestTimeMid, setShortestTimeMid] = useState(0);
  const [shortestTimeHard, setShortestTimeHard] = useState(0);

  const [averageTimeEasy, setAverageTimeEasy] = useState(0);
  const [averageTimeMid, setAverageTimeMid] = useState(0);
  const [averageTimeHard, setAverageTimeHard] = useState(0);

  const formatTime = (time) => {
    const hours = Math.floor(time / 3600);
    const minutes = Math.floor(time / 60);
    const secs = time % 60;
    return `${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes}:${secs < 10 ? '0' : ''}${secs}`;
  };


  useEffect(()=>{
    const loadRecords=async()=>{
        try{
            const showStartGameEasy=await AsyncStorage.getItem('startGameEasy');
            if(showStartGameEasy!==null){
              setStartGameEasy(JSON.parse(showStartGameEasy));
            }
            const showStartGameMid=await AsyncStorage.getItem('startGameMid');
            if(showStartGameMid!==null){
              setStartGameMid(JSON.parse(showStartGameMid));
            }
            const showStartGameHard=await AsyncStorage.getItem('startGameHard');
            if(showStartGameHard!==null){
              setStartGameHard(JSON.parse(showStartGameHard));
            }

            const showWinGameEasy=await AsyncStorage.getItem('winGameEasy');
            if(showWinGameEasy!==null){
              setWinGameEasy(JSON.parse(showWinGameEasy));
            }
            const showWinGameMid=await AsyncStorage.getItem('winGameMid');
            if(showWinGameMid!==null){
              setWinGameMid(JSON.parse(showWinGameMid));
            }
            const showWinGameHard=await AsyncStorage.getItem('winGameHard');
            if(showWinGameHard!==null){
              setWinGameHard(JSON.parse(showWinGameHard));
            }

            const showShortestTimeEasy=await AsyncStorage.getItem('shortestTimeEasy');
            if(showShortestTimeEasy!==null){
              setShortestTimeEasy(JSON.parse(showShortestTimeEasy));
            }
            const showShortestTimeMid=await AsyncStorage.getItem('shortestTimeMid');
            if(showShortestTimeMid!==null){
              setShortestTimeMid(JSON.parse(showShortestTimeMid));
            }
            const showShortestTimeHard=await AsyncStorage.getItem('shortestTimeHard');
            if(showShortestTimeHard!==null){
              setShortestTimeHard(JSON.parse(showShortestTimeHard));
            }

            const showAverageTimeEasy=await AsyncStorage.getItem('averageTimeEasy');
            if(showAverageTimeEasy!==null){
              setAverageTimeEasy(JSON.parse(showAverageTimeEasy));
            }
            const showAverageTimeMid=await AsyncStorage.getItem('averageTimeMid');
            if(showAverageTimeMid!==null){
              setAverageTimeMid(JSON.parse(showAverageTimeMid));
            }
            const showAverageTimeHard=await AsyncStorage.getItem('averageTimeHard');
            if(showAverageTimeHard!==null){
              setAverageTimeHard(JSON.parse(showAverageTimeHard));
            }
            
        }catch(error){
            console.error("Error loading records:",error);
        }
    };
    loadRecords();
},[]);

  const handleChange = (e) => {
    setSelectedIndex(e.nativeEvent.selectedSegmentIndex);
  };

  return (
    <View style={styles.container}>
      <SegmentedControl
        values={["容易", "中等", "困难"]}
        selectedIndex={selectedIndex}
        onChange={handleChange}
      />
      <View style={styles.content}>
        {selectedIndex === 0 && (
          <View>
            <View style={styles.section}>
              <Text style={styles.sectionTitle}>胜率</Text>
              <View style={styles.row}>
                <View style={styles.card}>
                  <Entypo name="man" size={25} style={styles.icon} />
                  <Text style={styles.cardText}>开始局数</Text>
                  <Text 
                      style={styles.cardData}>{startGameEasy}</Text>
                </View>
                <View style={styles.card}>
                  <Entypo name="trophy" size={25} style={styles.icon} />
                  <Text style={styles.cardText}>胜利局数</Text>
                  <Text style={styles.cardData}>{winGameEasy}</Text>
                </View>
                <View style={styles.card}>
                  <Entypo name="flag" size={25} style={styles.icon} />
                  <Text style={styles.cardText}>胜率</Text>
                  <Text style={styles.cardDataRate}>
                      {startGameEasy !== 0 ? ((winGameEasy/startGameEasy)*100).toFixed(2)+"%":"0.00%"}
                  </Text>
                </View>
              </View>
            </View>

            <View style={styles.section}>
              <Text style={styles.sectionTitle}>时间</Text>
              <View style={styles.row}>
                <View style={styles.card}>
                  <Entypo name="stopwatch" size={25} style={styles.icon} />
                  <Text style={styles.cardText}>最短用时</Text>
                  <Text style={styles.cardData}>{formatTime(shortestTimeEasy)}</Text>
                </View>
                <View style={styles.card}>
                  <Entypo name="back-in-time" size={25} style={styles.icon} />
                  <Text style={styles.cardText}>平均用时</Text>
                  <Text style={styles.cardData}>{formatTime(averageTimeEasy)}</Text>
                </View>
              </View>
            </View>
          </View>
        )}
        {selectedIndex === 1 && (
          <View>
            <View style={styles.section}>
              <Text style={styles.sectionTitle}>胜率</Text>
              <View style={styles.row}>
                <View style={styles.card}>
                  <Entypo name="man" size={25} style={styles.icon} />
                  <Text style={styles.cardText}>开始局数</Text>
                  <Text style={styles.cardData}>{startGameMid}</Text>
                </View>
                <View style={styles.card}>
                  <Entypo name="trophy" size={25} style={styles.icon} />
                  <Text style={styles.cardText}>胜利局数</Text>
                  <Text style={styles.cardData}>{winGameMid}</Text>
                </View>
                <View style={styles.card}>
                  <Entypo name="flag" size={25} style={styles.icon} />
                  <Text style={styles.cardText}>胜率</Text>
                  <Text style={styles.cardDataRate}>
                  {startGameMid !== 0 ? ((winGameMid/startGameMid)*100).toFixed(2)+"%":"0.00%"}
                  </Text>
                </View>
              </View>
            </View>

            <View style={styles.section}>
              <Text style={styles.sectionTitle}>时间</Text>
              <View style={styles.row}>
                <View style={styles.card}>
                  <Entypo name="stopwatch" size={25} style={styles.icon} />
                  <Text style={styles.cardText}>最短用时</Text>
                  <Text style={styles.cardData}>{formatTime(shortestTimeMid)}</Text>
                </View>
                <View style={styles.card}>
                  <Entypo name="back-in-time" size={25} style={styles.icon} />
                  <Text style={styles.cardText}>平均用时</Text>
                  <Text style={styles.cardData}>{formatTime(averageTimeMid)}</Text>
                </View>
              </View>
            </View>
          </View>
        )}
        {selectedIndex === 2 && (
          <View>
            <View style={styles.section}>
              <Text style={styles.sectionTitle}>胜率</Text>
              <View style={styles.row}>
                <View style={styles.card}>
                  <Entypo name="man" size={25} style={styles.icon} />
                  <Text style={styles.cardText}>开始局数</Text>
                  <Text style={styles.cardData}>{startGameHard}</Text>
                </View>
                <View style={styles.card}>
                  <Entypo name="trophy" size={25} style={styles.icon} />
                  <Text style={styles.cardText}>胜利局数</Text>
                  <Text style={styles.cardData}>{winGameHard}</Text>
                </View>
                <View style={styles.card}>
                  <Entypo name="flag" size={25} style={styles.icon} />
                  <Text style={styles.cardText}>胜率</Text>
                  <Text style={styles.cardDataRate}>
                  {startGameHard !== 0 ? ((winGameHard/startGameHard)*100).toFixed(2)+"%":"0.00%"}
                  </Text>
                </View>
              </View>
            </View>

            <View style={styles.section}>
              <Text style={styles.sectionTitle}>时间</Text>
              <View style={styles.row}>
                <View style={styles.card}>
                  <Entypo name="stopwatch" size={25} style={styles.icon} />
                  <Text style={styles.cardText}>最短用时</Text>
                  <Text style={styles.cardData}>{formatTime(shortestTimeHard)}</Text>
                </View>
                <View style={styles.card}>
                  <Entypo name="back-in-time" size={25} style={styles.icon} />
                  <Text style={styles.cardText}>平均用时</Text>
                  <Text style={styles.cardData}>{formatTime(averageTimeHard)}</Text>
                </View>
              </View>
            </View>
          </View>
        )}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: "#f5f5f5", 
  },
  content: {
    marginTop: 20,
  },
  section: {
    marginBottom: 30, // 每个部分的间距
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: "bold",
    marginBottom: 10, // 标题和内容的间距
  },
  row: {
    flexDirection: "row", // 横向排列
    justifyContent: "space-between", // 等距分布
  },
  card: {
    flex: 1, // 卡片均分宽度
    alignItems: "center", // 水平居中
    padding: 15, // 内部边距
    borderWidth: 1, // 边框宽度
    borderColor: "#00bcd4", // 边框颜色
    borderRadius: 10, // 圆角
    marginHorizontal: 5, // 卡片之间的间距
  },
  icon: {
    marginBottom: 10, // 图标与文字间距
    color: "#007ACC", // 图标颜色
  },
  cardText: {
    fontSize: 16,
    marginBottom: 5,
    color: "#333", // 文本颜色
  },
  cardData: {
    fontSize: 15,
    fontWeight: "bold",
    color: "#000", // 数据颜色
  },
  cardDataRate: {
    fontSize: 15,
    fontWeight: "bold",
    color: "#000", // 数据颜色
  },
});
